$(function () {
  var timeID

  var pro = new Progress('.progress', {
    val: 0, //初始值 取值范围：0-100
    size: 4, //控件大小默认值为10，可结合css自行修改样式
    precision: 2, //val精度配置，默认保留0位小数,最多配位4位
    drag: false, //默认开启拖拽，关闭设为false，不配置默认为true
    direction: 'horizontal', //方向 默认水平 vertical 垂直

    /*tip数值提示
     tip:true开启
     tip:false关闭，默认不设为关闭
     配置对象时tip默认开启
     tip: {
      trigger: 'show', //一直显示;'hover'：'hover':tip鼠标hover显示，默认为'show'
      align: 'bottom'//显示位置,默认为'top',  可设置'top,bottom,left,right'
     }
    */
    tip: {
      trigger: 'show', //
      align: 'bottom'
    },
    //获取val回调方法
    getVal: function (el) {
      // console.log(el) //这个进度条对象
      console.log(el.val)
    }
  })


  //   pro.onLoad(false)

  //头部
  $(".type ul li").click(function () {
    // var i = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');

    //清除定时器
    window.clearInterval(timeID);
    //改变进度条
    var price = $(this).attr('price');
    updateProgress(price);
  });

  /*
  动态更新val方法
   var pro = new Progress()
    pro.updateVal(val)
  */

  // pro.onLoad(true) //true  开启LoadIng  false 关闭loading

  //模拟音视频时间轴更新
  // var i = 0
  // timeID = setInterval(function() {
  //   i += 0.1
  //   pro.updateVal(i)
  //   console.log(pro.val)
  //   if (i >= 100) {
  //     clearInterval(timeID)
  //   }
  // }, 15)
  //垂直显示

  $(".species ul li").click(function () {
    $(this).addClass('active2').siblings().removeClass('active2');
  });

  $(".type ul li").eq(0).trigger('click');//元素被主动点击
  // $(".species ul li").filter(':odd').trigger('click')
  // $(".species ul li").eq(1).trigger('click')
  // $(".species ul li").eq(2).trigger('click')

  function updateProgress(p) {
    var i = 0;
    timeID = setInterval(function () {
      i += 0.10;
      pro.updateVal(i);//更新进度条的价格
      if (i >= p) {
        clearInterval(timeID);
      }
    }, 1)
  }



  //   new Progress('.progress2', {
  //     val: 0,
  //     size: 20,
  //     precision: 2,
  //     direction: 'vertical', //方向 默认水平 vertical 垂直
  //     tip: {
  //       trigger: 'hover',
  //       align: 'left'
  //     },
  //     //loading: true,
  //     getVal: function(el) {
  //       console.log(el.val)
  //     }
  //   })

  //   //禁用拖拽
  //   new Progress('.progress3', {
  //     drag: false,
  //     tip: false
  //   })

  let groups = [[1, 2, 3], [3, 5], [8, 9]];
  $(".type ul li").click(function (index) {
    let group = groups[$(this).index()];
    $(".species ul li").css({"color":"black","background-color":"#fff"});
    for (const pos of group) {
      $(".species ul li").eq(pos).css({"color":"#fff","background-color":"#ed545a"});
    }


  

  });
});
